
<h3 mat-dialog-title class="mb-0">Test your '{{data.type}}' model</h3>

<div mat-dialog-content>

  <!-- CodeMirror editor in case data is Hyperlambda -->
  <div class="col-12 mb-2" *ngIf="ready">

    <p class="text-muted text-small mb-3">
      Test your model here by asking it questions and sanity check its result
    </p>

    <app-codemirror-hyperlambda
      [(model)]="model">
    </app-codemirror-hyperlambda>

  </div>

  <div class="col-12" *ngIf="!ready && !preview">

    <p class="text-muted text-small mb-3">
      Test your model here by asking it questions and sanity check its result
    </p>

    <!-- Everything BUT Hyperlambda -->
    <mat-form-field class="w-100 custom-alignment">
      <span
        matPrefix
        matTooltip="Completion"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>edit</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <textarea
        matInput
        placeholder="Completion"
        [disabled]="isLoading"
        [(ngModel)]="completion"
        rows="20">
      </textarea>
    </mat-form-field>

  </div>

  <!-- Preview of text content transformed as Markdown instead of textarea -->
  <div class="col-12 mb-2 mt-2" *ngIf="!ready && preview">

    <p class="text-muted text-small mb-3 mt-0">
      Test your model here by asking it questions and sanity check its result
    </p>

    <mat-card class="markdown-preview" [innerHTML]="completion | marked"></mat-card>

  </div>

  <form (ngSubmit)="submit()" class="d-flex justify-content-md-between align-items-md-center align-items-end flex-md-row w-100">

    <mat-form-field class="w-100 standalone-field me-3">
      <span
        matPrefix
        matTooltip="Prompt"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>help_outline</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        placeholder="Prompt"
        name="prompt"
        cdkFocusInitial
        [disabled]="isLoading"
        [(ngModel)]="prompt"
        autocomplete="off">
    </mat-form-field>

    <button
      mat-button
      type="submit"
      [disabled]="isLoading">
      Submit
    </button>

    <mat-slide-toggle
      labelPosition="before"
      class="me-2"
      name="preview"
      (change)="previewChanged()"
      [(ngModel)]="preview">
      Preview
    </mat-slide-toggle>

    <button
      mat-button
      (click)="train()"
      type="button"
      [disabled]="isLoading || (!prompt || prompt.length === 0 || !completion || completion.length === 0)">
      Train
    </button>

    <button
      mat-button
      [disabled]="isLoading"
      type="button"
      mat-dialog-close>
      Close
    </button>

  </form>

</div>
